$(document).ready(function () {


    layui.use(function () {

        var layer = layui.layer;

        initSubMenu();

        queryMaterialCount();
        queryMaterialTypeCount();
        typeChart();
        monthChart()
        queryList();
    });
})



function queryMaterialCount() {

    new AjaxChain()
        .setUrl('/material/type/num/count')
        .then(data => {


            $('.count-top').empty().append(
                `<div>
                    物资类型（种）<span>${data.totalType}</span>
                </div>
                <div>
                    当前库存（个）<span>${data.totalInventory}</span>
                </div>`
            )

        })
        .send();
}

function queryMaterialTypeCount() {

    new AjaxChain()
        .setUrl('/material/status/num/count')
        .then(data => {


            $('.count-bottom').empty().append(

                data.reduce((x, y) => { 
                    return x+`<div style='background-image: url("../static/img/index/m${y.status}.png");'><span>${y.statusNum}</span>${y.statusName}</div>`
                }, '')
            )

        })
        .send();
}




function typeChart() {


    new AjaxChain()
        .setUrl('/material/type/category/num/count')
        .then(data => {

            var pieData = data.map(item => ({
                name: item.typeName,
                value: item.typeNum,
            }))

            var option = {
                tooltip: {
                    show: true,
                },
                series: [

                    {
                        type: 'pie',
                        // roseType: true 和 roseType: 'area' 在填充值后显示方式不同
                        roseType: true,
                        clockwise: false,
                        center: ['50%', '50%'],
                        radius: ['10%', '70%'], // 第一个参数控制玫瑰图圆心大小,第二个参数控制玫瑰图大小
                        data: pieData,
                        label: {
                            normal: {
                                formatter: params => {
                                    return (
                                        '{icon|●}{name|' + params.name + '}\n{value|' +
                                        params.value + '}'
                                    );
                                },
                                // padding: [0 , -100, 25, -100],
                                rich: {
                                    icon: {
                                        fontSize: 14,
                                        color: 'inherit'
                                    },
                                    name: {
                                        fontSize: 14,
                                        padding: [0, 0, 0, 5],
                                        color: '#fff'
                                    },
                                    value: {
                                        fontSize: 14,
                                        fontWeight: 'bolder',
                                        padding: [5, 0, 0, 20],
                                        color: 'inherit'
                                        // color: '#333333'
                                    }
                                }
                            }
                        },
                    },
                ],
            }
            var myChart = echarts.init(document.getElementById('chart1'));
            myChart.setOption(option);

        })
        .send();

}



function monthChart() {
    new AjaxChain()
        .setUrl('/material/operation/num/count')

        .then(data => {

            var xData = data.map(item => (item.date))
            var inData = data.map(item => (item.in))
            var outData = data.map(item => (item.out))


            var myChart = echarts.init(document.getElementById('chart2'));

            var option = {
                color: ['#80A0FF',
                    '#16BAEE'],
                legend: {
                    show: true,
                    left: "7%",
                    top: "5%",
                    textStyle: {
                        color: '#E2F1FF'
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        color: "#BDE4FF"
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#296085',
                        }
                    },
                    data: xData
                },
                yAxis: {
                    type: 'value',
                    minInterval: 1,
                    axisLabel: {
                        color: "#BDE4FF"
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#296085',
                            type: "dashed"
                        }
                    }
                },
                series: [
                    {
                        data: inData,
                        name: '入库',
                        type: 'line',
                        symbolSize: 8,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [{
                                    offset: 0,
                                    color: '#16BAEE33',
                                },
                                {
                                    offset: 0.8,
                                    color: '#16BAEE00',
                                },
                                ],
                                false
                            ),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                            shadowBlur: 10,
                        },
                        itemStyle: {
                            normal: {
                                color: '#80A0FF',
                                shadowColor: '#80A0FF',
                                shadowBlur: 3,
                                //shadowOffsetY: 0
                            },
                        },
                        lineStyle: {
                            shadowColor: 'rgba(20, 20, 20, 0.9)',
                            shadowBlur: 3,
                            shadowOffsetX: 3,
                            shadowOffsetY: 2,
                        },
                    },
                    {
                        data: outData,
                        type: 'line',
                        symbolSize: 8,
                        name: '出库',
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [{
                                    offset: 0,
                                    color: '#16BAEE33',
                                },
                                {
                                    offset: 0.8,
                                    color: '#16BAEE00',
                                },
                                ],
                                false
                            ),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                            shadowBlur: 10,
                        },
                        itemStyle: {
                            normal: {
                                color: '#16BAEE',
                                shadowColor: '#16BAEE',
                                shadowBlur: 3,
                                //shadowOffsetY: 0
                            },
                        },
                        lineStyle: {
                            shadowColor: 'rgba(20, 20, 20, 0.9)',
                            shadowBlur: 3,
                            shadowOffsetX: 3,
                            shadowOffsetY: 2,
                        },
                    }
                ]
            };


            myChart.setOption(option);
        })
        .send();
}





function queryList() {
    new AjaxChain()
        .setUrl('/material/notice/list')
        .setData(
            {
                pageNum: 1,
                pageSize: 5,
            }
        )
        .then(data => {

            //  1过期 2库存 3充电

            $('.toolle-bottom')
                .empty()
                .append(
                    data.data.reduce((x, y) => {
                        return x + `<div>
                                <li>${y.dataTypeDesc}</li>
                                <li>${y.dataType == 2 ? y.typeName : y.materialName}</li>
                                 <li>${y.dataType == 2 ? y.typeCode : y.materialCode}</li>
                                <li>${y.dataTime}</li>
                            </div>`
                    }, `<div><li>预警类型</li><li>物资类型</li><li>物资编号</li><li>上报时间</li></div>`)
                )

        })
        .send();
}
